<template>
  <el-table :data="list">
    <el-table-column label="供应商" min-width="28%" prop="provider.name" />
    <el-table-column label="参考编号" min-width="30%" prop="provider.coding" />
    <el-table-column label="是供应商" min-width="8%">
      <template v-slot="{row}">{{ row.provider.is_provider?'是':'否' }}</template>
    </el-table-column>
    <el-table-column label="是制造商111" min-width="8%">
      <template slot-scope="{row}">{{ row.provider.is_manufacturer?'是':'否' }}</template>
    </el-table-column>
    <el-table-column label="是外包商" min-width="9%">
      <template slot-scope="{row}">{{ row.provider.is_epiboly?'是':'否' }}</template>
    </el-table-column>
    <el-table-column label="偏好的" min-width="9%" prop="preference" />
    <el-table-column label="占位符" min-width="8%">
      <template v-slot="scope">
        <el-button icon="el-icon-delete" @click="remove(scope.$index, scope.row.id)" />
      </template>
    </el-table-column>
    <div slot="append">
      <el-form :model="data" :inline="true">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-form-item label>
              <v-select v-model="data.provider_id" action="provider" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label>
              <el-input v-model="data.coding" disabled placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label>
              <el-input v-model="data.coding" disabled placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label>
              <el-input v-model="data.coding" disabled placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label>
              <el-input v-model="data.coding" disabled placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label>
              <el-input v-model="data.preference" placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label>
              <el-button icon="el-icon-upload2" @click="save" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-table>
</template>

<script>
import API from '@/api/maintain/part'
import VSelect from '@/components/select'
import init from '@/mixins/init'
export default {
  name: 'PartProvider',
  components: { VSelect },
  mixins: [init],
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [],
      data: {}
    }
  },
  methods: {
    index() {
      API.providers({ part_id: this.value }).then(response => {
        this.list = response.data.data
      })
    },
    save() {
      API.provider({ part_id: this.value, ...this.data }).then(() => {
        this.index()
      })
    },
    remove(index, id) {
      API.providerDelete(id).then(() => {
        this.list.splice(index, 1)
      })
    }
  }
}
</script>
<style>
</style>
